<template>
  <div class="groupManage common-container">
    <div class="common-top">
      <span class="left">
        拼团订单信息
        <!--<el-form-->
        <!--:inline="true"-->
        <!--:model="formInline"-->
        <!--size="small"-->
        <!--class="demo-form-inline"-->
        <!--&gt;-->
        <!--<el-form-item label="搜索">-->
        <!--<el-input-->
        <!--v-model="formInline.searchVal"-->
        <!--placeholder="输入用户ID搜索"-->
        <!--&gt;</el-input>-->
        <!--</el-form-item>-->
        <!--</el-form>-->
      </span>
      <!--<el-button type="primary" @click="toModify('add')">添加</el-button>-->
    </div>
    <div class="common-bot">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <!--<el-table-column prop="source" label="产品Id" align="center">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{ scope.row.productId }}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="source" label="产品名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.productName }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column prop="source" label="产品金额" align="center">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{ scope.row.money/100 }}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="source" label="成团数量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.successCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="成团时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.successTime>0">{{scope.row.successTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            <span v-else>还差{{scope.row.successCount - scope.row.joinUserCount}}人成团</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="处理时间" align="center">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.handleTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="source" label="拼团失败奖励金额" align="center">
          <template slot-scope="scope">
            <span>{{formatMoney(scope.row.failedAward)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" v-if="hasPerm('orders:groupbuy:detail')">
          <template slot-scope="scope">
            <span class="span-modify edit" @click.stop="openDetailPopup(scope.row)"
                  v-if="hasPerm('orders:groupbuy:detail')">详情</span>
          </template>
        </el-table-column>

      </el-table>

      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>

    </div>
    <el-dialog title="参团数据" :visible.sync="getJoinGroupTableVisible" :width="dialogWidth" class="joinGroup_dialog">
      <el-table :data="joinGroupData" height="250" class="getJoinGroupDataTable">
        <el-table-column prop="source" label="订单号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="购买者" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.creator">
              {{ scope.row.creator.name }}
              <span v-if="scope.row.creator.inviteUser"><br>(邀请人：{{scope.row.creator.inviteUser.name}})</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="加入时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.creator">{{ scope.row.creator.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="产品名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="订单金额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.money | parseMoneyExcept }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="收货人信息" align="center">
          <template slot-scope="scope">
            <div>
              <div>{{ scope.row.name }}</div>
              <div>{{ scope.row.mobile }}</div>
              <div>{{ scope.row.address }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="物流信息" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.expressName">
              <div>{{ scope.row.expressName }}</div>
              <div>{{ scope.row.expressNumber }}</div>
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="状态" align="center">
          <template slot-scope="scope">
            <span>
              {{ statusFormat[scope.row.status] }}<br>
              <span v-if="scope.row.status == 'refund'"
                    style="color: red">奖金：￥{{scope.row.reward | parseMoneyExcept}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="中签状态" align="center">
          <template slot-scope="scope">
            <span :class="{'red':scope.row.bingo}">{{ bingoFormat[scope.row.bingo] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.payTime>0">{{ scope.row.payTime | parseTime }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {showDecimal,} from '../../utils'
import {groupbuyList, groupbuyItems} from "@/api/order";

export default {
  name: "groupManage",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      getJoinGroupTableVisible: false,
      showPage: false,
      dialogWidth: "",
      formInline: {
        searchVal: "",
      },
      joinGroupData: [],
      tableData: [],
      payTypeFormat: {
        wxpay_online: "微信",
        alipay: "支付宝",
      },
      statusFormat: {
        cancel: "已取消",
        init: "待付款",
        paid: "待成团",
        grouped: "待发货",
        shipped: "待收货",
        finish: "已完成",
        refund: "已退款",
      },
      bingoFormat: {
        true: "已中签",
        false: "未中签",
      },
      limit: 10,
      limitForOrder: 10,
      nowPageForOrder: 1,
      nowPage: 1,
      totalElement: 0,
      totalElementForOrder: 0,
      joinGroupParams: {
        nowPage: 0,
        limit: 5,
      },
      joinGroupTotal: 0,
      gender: {
        female: "女",
        male: "男",
      },
      checkStatusOptions: {
        checking: "审核中",
        success: "审核通过",
        failed: "未通过",
      },
    };
  },
  watch: {
    nowPage(val) {
      this.getData();
      this.setStateData(val);
    },
    limit(val) {
      this.getData();
    },
    "formInline.searchVal": function (val) {
      this.getData();
    },
    screenWidth: {
      immediate: true,
      handler(val) {
        if (val - 100 > 1350) {
          this.dialogWidth = 1350 + 'px'
        } else {
          this.dialogWidth = val - 100 + 'px'
        }
        console.log("弹窗宽度是：", this.dialogWidth);
      }
    },
  },
  methods: {
    formatMoney(money) {
      return showDecimal(money)
    },
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    openDetailPopup(item) {
      this.getJoinGroupTableVisible = true;
      this.getGroupbuyItems(item.id)
    },
    getGroupbuyItems(id) {
      groupbuyItems({
        targetId: id
      })
        .then((res) => {
          if (res.code === 200) {
            console.log(res, "参与拼团的数据groupbuyItems");
            this.joinGroupData = res.data;
          }
        });
    },
    toModify(type) {
      this.$router.push({name: "ModifyTeacher", query: {type}});
    },
    handleCurrentChange_joinGroupData(val) {
      this.joinGroupParams.nowPage = val - 1
    },
    handleSizeChange_joinGroupData(val) {
      this.joinGroupParams.limit = val
    },
    getData() {
      groupbuyList({
        limit: this.limit,
        page: this.nowPage - 1,
        userId: "",
        productId: "",
      })
        .then((res) => {
          if (res.code === 200) {
            console.log(res, "groupbuyList拼团8888");
            this.tableData = res.data;
            this.totalElement = res.total;
            this.showPage = true;
          }
        });
    },
  },
  mounted() {
    this.getData();
    const that = this
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth
      })()
    }
  },
};
</script>
<style>
  .joinGroup_dialog .el-dialog {
    height: 80vh;
    width: 70%;
    margin-top: 10vh !important;
  }
  .joinGroup_dialog .el-dialog  .el-dialog__body{
    overflow: auto;
  }

  .getJoinGroupDataTable{
    height: calc(80vh - 100px) !important;
  }


</style>

<style lang="scss" scoped>
  .red {
    color: red;
  }
</style>
